<template>
  <div>
    <div class="container">
      <div class="btn-box">
        <a class="active">机构搜索 </a>
      </div>
      <div style="margin: 0 auto; width: 1200px">
        <iframe
          id="sketch"
          :src="ketcherHtmlSrc"
          style="width: 1200px; height: 412px"
          ref="sketchFrame"
          @load="loadSketcher"
        ></iframe>
        <div class="marvin-form">
          <a class="form-btn" @click="search">搜索</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import { molAPI } from '@/api'
export default {
  name: "GoodsList",
  data() {
    return {
      mol: null,
      htmlSrc: "static/marvinjs-22.16.1-all/demo.html", // 注意: 直接写 static ,前面不需要加任何路径和字符。
      ketcherInstance: null,
      ketcherHtmlSrc: "./static/ketcher/index.html",
    };
  },
  methods: {
    loadSketcher() {
      this.ketcherInstance = this.$refs.sketchFrame.contentWindow.ketcher;
    },
    search() {
      if (!this.ketcherInstance) {
        this.ketcherInstance =
          document.getElementById("sketch").contentWindow.ketcher;
        if (!this.ketcherInstance) {
          this.$message({
            message: "请画出结构式",
            type: "error",
          });
          return;
        }
      }
      this.ketcherInstance.getSmiles().then((res) => {
        this.mol = res;
        if (!this.mol) {
          this.$message({
            message: "请画出结构式",
            type: "error",
          });
          return;
        }
        // 拿到smiles分子式
        console.log("mol", this.mol);

        // 发送post请求

        // this.$axios({
        //   url: "api/mol",
        //   method: "post",
        //   data: {
        //     mol: this.mol,
        //   },
        //   headers: { "Content-Type": "application/x-www-form-urlencoded" },
        // });

        // this.$axios
        //   .get("api/mol", {
        //     params: {
        //       mol: this.mol,
        //     },
        //   })
        //   .then((res) => {
        //     console.log(res);
        //   });

        // this.$axios({
         // url: "http://192.168.1.104:70/mol",
         // method: "post",
       //   data: {
        //    mol: this.mol,
        //  },
        //  headers: { "Content-Type": "application/x-www-form-urlencoded" },
      //  });



      const { data: result } = molAPI(this.mol)

        console.log(result)

        this.push();
      });
    },

    // 路由跳转
    push() {
      this.$router.push({
        path: "/results",
        query: { flight: JSON.stringify(this.mol) },
      });
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .ivu-radio-group {
  margin-top: 9px;
}
::v-deep .ivu-form-item-content {
  display: flex;
}

.btn-box {
  width: 1200px;
  margin: 0 auto;
  height: 40px;
  margin-top: 16px;
  margin-bottom: 24px;
  display: flex;
  a {
    font-size: 16px;
    color: #666666;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 104px;
  }
  .active {
    background: rgba(97, 131, 199, 0.1);
    border-radius: 4px;
    color: #333333;
    font-weight: 600;
  }
}
.form-btn {
  display: block;
  font-size: 14px;
  color: #ffffff;
  background: #319ff5;
  border-radius: 4px;
  width: 64px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  margin-bottom: 24px;
  margin-left: 98px;
}
.marvin-form {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .form-btn {
    display: inline-block;
    margin-left: 24px;
    margin-bottom: 0;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 104px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
  }
}
</style>
